<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        conputed 是以属性的方式访问,有缓存,如果页面中有多次调用，computed 调用一次， {{temp()}}
        methods  是需要通过()来执行函数体 ,有多少次就调用多少次，复杂的逻辑计算时，选用computed计算属性{{itemp()}}
        wacth   当数据发生变化时 需要去执行其他响应操作时。（ajax或者其他他开销较大的操作）

        
     -->
     <div id="box">
         <input type="text" name="" id="" v-model="firstname">
         <input type="text" name="" id="" v-model="lastname">
         <div>
             {{fullname}}      {{fullname}}     {{fullname}}
         </div>
         <div>
            {{getfullname()}}  {{getfullname()}} {{getfullname()}}
        </div>
     </div>
     <script src="./js/vue.js"></script>
     <script>
         let vm = new Vue({
             el:'#box',
             data:{
                 firstname:"",
                 lastname:''
             },
             computed:{
                fullname(){
                    console.log("computed");
                    return this.firstname+this.lastname
                }
             },
             methods:{
                 getfullname(){
                    console.log("methods");
                    return this.firstname+this.lastname
                 }
             }
         })
     </script>
</body>
</html>